<template>
  <div id="app">
     <div v-title data-title='登录'></div>
    <div class="container">
      <div class="close">
        <span class="iconfont iconicon-test"></span>
      </div>
      <div class="logo">
        <span class="iconfont iconnew"></span>
      </div>
      <div class="inputs">
        <myinput
          v-model.trim="user.username"
          placeholder="请输入用户名"
          :rules="/^1[356789]\d{9}$/"
          message="请输入11位手机号码"
        ></myinput>
        <myinput
          v-model.trim="user.password"
          placeholder="请输入密码"
          :rules="/^.{3,16}$/"
          message="请输入3-16位密码"
        ></myinput>
      </div>
      <p class="tips">没有账号？<a href="#/register" class="">去注册</a></p>
      <!-- 自定义组件按钮 3.使用 -->
      <!-- 父级监听mybutton的事件click -->
      <mybutton @click="login" type="success">登录</mybutton>
    </div>
  </div>
</template>

<script>
// 自定义组件按钮使用 1.引入
import mybutton from "@/components/mybutton";
import myinput from "@/components/myinput";
import { userLogin } from "@/apis/user";
export default {
  data() {
    return {
      user: {
        username: "15323923080",
        password: "123456",
      },
    };
  },
  components: {
    // 自定义组件按钮使用 2.注册
    mybutton,
    myinput,
  },
  methods: {
    login(e) {
      // console.log('登录了',e);
      if (
        /^1[356789]\d{9}$/.test(this.user.username) &&
        /^.{3,16}$/.test(this.user.password)
      ) {
        userLogin(this.user)
          .then((res) => {
            console.log(res);
            //跳转到个人中心
            if (res.data.message === "登录成功") {
              localStorage.setItem("toutiaoToken", res.data.data.token);
              let redirecturl = location.href.split('=')[1]
              if( redirecturl){
                location.href = decodeURIComponent(redirecturl)
              }else{
              this.$router.push({ path: `/personal/${res.data.data.user.id}` });
              }
            } else {
              this.$toast({
                message: "登录失败",
                icon: "van-icon van-icon-fail",
                duration: 1500,
              });
              //   .fail("登录失败");
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.$toast({
          message: "用户数据输入不正确",
          icon: "van-icon van-icon-cross",
          duration: 1500,
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
#app{ 
  background: linear-gradient(to bottom right, #69cbb5, #3575cf);
  width: 100vw;
  height: 100vh;
  position:absolute;
 
}
.container {
  padding: 20px;
}
.close {
  span {
    font-size: 27 / 360 * 100vw;
  }
}
.logo {
  display: flex;
  justify-content: center;

  span {
    display: block;
    font-size: 126 / 360 * 100vw;
    // color: #d81e06;
    color: #00f5f5;
  }
}
.inputs {
  input {
    margin-bottom: 20px;
  }
}
.tips {
  text-align: right;
  margin-bottom: 20px;
  a {
    // color: #3385ff;
    color: rgb(255, 145, 0);
  }
}
</style>